<!DOCTYPE html>
<html class="x-admin-sm">
  
  <head>
    <meta charset="UTF-8">
    <title>菜单添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css">
   <script type="text/javascript"  src="./lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="./js/index.js"></script>
 
  </head>
  
  <body>
    <div class="layui-fluid">
        <div class="layui-row">
            <form  id="memuform" method="post" class="layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        <span class="x-red">*</span>菜单名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="memu_name"  name="memu_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
              <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                        样式
                    </label>
                    <div class="layui-input-inline">
                        <input type="text"  id="memu_style"  name="memu_style" 
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                   
               <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       图片
                    </label>
                    <div class="layui-input-inline">
                    	<img id="upimg1" width="200px" height="100px" />
                    	<input class="layui-btn" type="button" value="添加图片" style="background: #66A8CC;">
                      	<input id="memupicture"   name="memupicture"   style="opacity: 0;position: relative;top: -26px;"  accept="image/*"  type="file">
                       
                    </div>
                </div>
                
                 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       URL
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="memu_url"  name="memu_url"  
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       <span class="x-red">*</span>菜单类型
                    </label>
                    <div class="layui-input-inline">
                        <select type="text" id="memu_typeid" name="memu_typeid"  
                        autocomplete="off" class="layui-input"></select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       <span class="x-red">*</span>跳转方式
                    </label>
                    <div class="layui-input-inline">
                        <select type="text" id="memu_skiptype"   name="memu_skiptype" 
                        autocomplete="off" class="layui-input">
                        <option value="0">本页面</option>
                         <option value="1">新页面</option>
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       <span class="x-red">*</span>菜单等级
                    </label>
                    <div class="layui-input-inline">
                        <select type="text" id="memu_grade"  name="memu_grade"  
                        autocomplete="off" class="layui-input">
                        <option value="1">一级菜单</option>
                         <option value="2">二级菜单</option>
                         <option value="3">三级菜单</option>
                         <option value="4">四级菜单</option>
                         <option value="5">五级菜单</option>
                         
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       <span class="x-red">*</span>父菜单
                    </label>
                    <div class="layui-input-inline">
                        <select  id="memu_parentid"  name="memu_parentid" 
                        autocomplete="off" class="layui-input">
                     
                         
                        </select>
                    </div>
                </div>
                
                 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       登录时菜单名
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="memu_logname"   name="memu_logname" 
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                
             
                   
               <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       登录时图片
                    </label>
                    <div class="layui-input-inline">
                    	<img id="upimg2" width="200px" height="100px" />
                    	<input class="layui-btn" type="button" value="添加图片" style="background: #66A8CC;">
                      	<input id="memulogpicture"   name="memu_logpicture"   style="opacity: 0;position: relative;top: -26px;"  accept="image/*"  type="file">
                       
                    </div>
                </div>
                
                 <div class="layui-form-item">
                    <label for="name" class="layui-form-label">
                       登录时URL
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="memu_logurl"   name="memu_logurl"  
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
               
                <div class="layui-form-item layui-form-text">
                    <label for="desc" class="layui-form-label">
                        描述
                    </label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入内容" id="memu_desc" name="memu_desc" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                <input type="button" value="增加" class="layui-btn"  onclick="add()">
              </div>
            </form>
        </div>
    </div>
    <script src="js/jquery.js"></script>
 
    <script>
    	
    	      selects();
    	//模糊查询
    	function selects(){
    		
    		$.ajax({
    			type:"get",
    			url:"http://localhost:16111/memurbac/reachaddafter",
    			xhrFields:{withCredentials: true},
    			dataType:"json",    			    		
    			success:function(res){
    				//表示为查询成功，
    				if(res.code==200){
    		          
    		          	//添加菜单类型
    		          	$('#memu_typeid').html("");
    					for(var j in res.data.memutypes){
    						
    						var str1="<option value=\""+res.data.memutypes[j].id+"\">"+res.data.memutypes[j].mt_name+"</option>"
    					$('#memu_typeid').html($('#memu_typeid').html()+str1);
    					}
    					
    			
    					   	//添加菜单列表
    		          	$('#memu_parentid').html("");
    					for(var i in res.data.memus){
    						
    						var str="<option value=\""+res.data.memus[i].id+"\">"+res.data.memus[i].memu_name+"</option>"
    					$('#memu_parentid').html($('#memu_parentid').html()+str);
    					}
    					    
    					    
    					     //重新加載js文件
    					   loadJs("./lib/layui/lay/modules/form.js");
    				}else{
    					
    					layui.use("layer", function () {
                //提示错误信息
    					layer.msg(res.error,{icon:7,time:1000});
             })

    					
    				
    				}
    			},
    			error:function(error){
    			
    				layui.use("layer", function (){
             	//提示错误信息
    				layer.msg(JSON.stringify(error),{icon:2,time:1000});
             })
    				
    			}
    		});
   
    	}
    	  	//上传图片
      document.getElementById("memupicture").onchange=function (ev1) {
        	  
            // 2.1 获取用户上传的内容
            // console.log(this.value);    //C:\fakepath\guitar_head_v2_00-wallpaper-2560x1440.jpg value内保存的是上传路径
            var path = this.value;

            // 2.2 字符串截取
            var suffix = path.substr(path.lastIndexOf('.'));
            // console.log(suffix)

            // 2.3 统一转换成小写
            var lowerSuffic = suffix.toLowerCase()

            // 2.4 判断
            if(lowerSuffic === '.jpg' || lowerSuffic === '.png' || lowerSuffic === '.gif'){
            	 
            	// alert(path));
                //回显图片
               
           var file = this.files[0];
           var reader = new  FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (ev){
         $("#upimg1").attr("src", ev.target.result);
     }
                
            }
            else{
            			layui.use("layer", function () {
                //提示错误信息
    					layer.msg('上传图片格式不正确',{icon:7,time:1000});
             })

            }
        }
      
      // 上传登录时图片
      document.getElementById("memulogpicture").onchange=function (ev1) {
        	
            // 2.1 获取用户上传的内容
            // console.log(this.value);    //C:\fakepath\guitar_head_v2_00-wallpaper-2560x1440.jpg value内保存的是上传路径
            var path = this.value;

            // 2.2 字符串截取
            var suffix = path.substr(path.lastIndexOf('.'));
            // console.log(suffix)

            // 2.3 统一转换成小写
            var lowerSuffic = suffix.toLowerCase()

            // 2.4 判断
            if(lowerSuffic === '.jpg' || lowerSuffic === '.png' || lowerSuffic === '.gif'){
            	 
            	// alert(path));
                //回显图片
               
           var file = this.files[0];
           var reader = new  FileReader();
          reader.readAsDataURL(file);
          reader.onload = function (ev){
         $("#upimg2").attr("src", ev.target.result);
           }
                
            }
            else{
            			layui.use("layer", function () {
                //提示错误信息
    					layer.msg('上传图片格式不正确',{icon:7,time:1000});
             })

            }
        }
     
    	
         //监听提交
           function add(){ 
         
       //  alert(JSON.stringify(data.field))
                  
     var temFile = document.getElementById('memupicture');
    var fileObj = temFile.files[0];
         var temFile1 = document.getElementById('memulogpicture');
    var fileObj1 = temFile1.files[0];
    var formData = new FormData();
     if(fileObj!=undefined){
     	 formData.append('memupicture', fileObj);
     }
    if(fileObj1!=undefined){
     	 formData.append('memulogpicture', fileObj1);
     }
  
    formData.append("memu_name",$('#memu_name').val()); //添加其他参数
    formData.append("memu_style",$('#memu_style').val());
    formData.append("memu_url",$('#memu_url').val());   
    formData.append("memu_typeid",$("#memu_typeid").val());
    formData.append("memu_skiptype",$('#memu_skiptype').val());
    formData.append("memu_grade",$('#memu_grade').val());
    formData.append("memu_parentid",$("#memu_parentid").val());
    formData.append("memu_logname",$('#memu_logname').val());
    formData.append("memu_logurl",$('#memu_logurl').val());
    formData.append("memu_desc",$('#memu_desc').val());
    
   
            //发异步，把数据提交给服务器
             		$.ajax({
    			type:"post",
    			url:"http://localhost:16111/memurbac/addmemu",
    			xhrFields:{withCredentials: true},   			
          dataType: "JSON",
          processData: false,
          contentType: false,
    			data:formData,
    			success:function(res){
    				//表示为新增菜单成功
    				if(res.code==200){
    			    	//提示成功信息
    				
    						layui.use("layer", function () {
                
          layer.alert(res.data, {icon: 6},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                parent.selects();
                //关闭当前frame
                parent.layer.close(index);
            });
            
            
       });
    					 
    
    				}else{
    					//提示错误信息
    					
    						layui.use("layer", function () {
                
          layer.alert(res.error, {icon: 7},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            
       });
    						 
    					
    				}
    			},
    			error:function(error){
    				//提示错误信息
    				
    						layui.use("layer", function () {
                
           layer.alert(error, {icon: 2},function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
            });
            
       });
    								
    			}
    				
    		});
          }
        
        //重新加载js文件
        function loadJs(file)
{
    var head = $("head").remove("script[role='reload']");
    $("<scri"+"pt>"+"</scr"+"ipt>").attr({ 
    role:'reload',src:file,type:'text/javascript'}).appendTo(head);
}
    </script>



  </body>

</html>